<template>
  <div class="custom_page">
    <div class="content">
      <!-- 顶部搜索 -->
      <div class="toolbar">
        <!-- 顶部搜索 -->
        <el-form :inline="true" :model="formInline">
          <el-form-item label="渠道名称">
            <el-input v-model="formInline.userName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="用户手机号">
            <el-input v-model="formInline.phone" placeholder="请输入" />
          </el-form-item>
          <el-form-item label-width="0">
            <el-button type="primary" plain @click="search">查询</el-button>
            <el-button plain @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--  表格 -->
      <div class="content_table">
        <div class="table">
          <el-table
            :data="tableData"
            border
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
            style="width: 100%"
          >
            >
            <el-table-column prop="userName" label="渠道名称" />
            <el-table-column prop="phone" label="用户手机号" />
            <el-table-column prop="profitBalance" label="收益余额" />
            <el-table-column prop="profitTotal" label="历史总收益" />
            <el-table-column prop="profitCashed" label="总提现金额" />
            <el-table-column prop="profitRate1" label="一级佣金比列(%)" />
            <el-table-column prop="profitRate2" label="二级佣金比列(%)" />
            <el-table-column prop="idName" label="身份证名称" />
            <el-table-column prop="idCard" label="身份证号码" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="btnList">
                  <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- ******************************************************弹框开始****************************************************** -->
    <!-- 编辑渠道信息表单 -->
    <el-dialog
      :title="'编辑渠道'"
      :visible.sync="dialogVisible"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <div>
        <el-tabs @tab-click="handleClick">
          <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
            <el-form-item label="渠道名称" prop="userName">
              <el-input v-model="ruleForm.userName" :disabled="disabled" maxlength="20" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" :disabled="disabled" maxlength="20" />
            </el-form-item>
            <el-form-item label="一级佣金比例" prop="profitRate1">
              <el-input v-model="ruleForm.profitRate1" maxlength="20" />
            </el-form-item>
            <el-form-item label="二级佣金比例" prop="profitRate2">
              <el-input v-model="ruleForm.profitRate2" maxlength="20" />
            </el-form-item>
            <el-form-item label="上级用户id" prop="ruid">
              <el-input v-model="ruleForm.ruid" maxlength="20" />
            </el-form-item>
          </el-form>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="addCheck('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getShopId } from '@/utils/auth'
import {
  applicationGetAll,
  queryUserDealerInfo,
  updateRate
} from '@/api/userdealer'
export default {
  data() {
    return {
      dialogVisible: false,
      id: '',
      formInline: {
        userName: '', // 用户名称
        phone: '', // 手机号码
        page: 1,
        pageSize: 10
      },
      disabled: true,
      ruleForm: {
        id: '',
        userName: '', // 渠道名称
        phone: '', // 渠道手机信息
        profitRate1: '', // 一级佣金比例
        profitRate2: '', // 二级佣金比例
        ruid: '' // 上级用户id
      },
      total: 1,
      tableData: [],
      currentPage: 1
    }
  },
  created() {
    this.getAll(this.formInline)
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 查询
    search() {
      this.total = 1
      this.formInline.page = 1
      this.getAll(this.formInline)
    },
    // 清除
    clear() {
      this.formInline = {
        userName: '', // 用户名称
        phone: '', // 手机号码
        page: 1,
        pageSize: 10
      }
      this.getAll(this.formInline)
    },
    closeFn() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
        this.dialogVisible = false
      })
    },
    addCheck(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          updateRate(this.ruleForm).then(res => {
            console.log(res)
            if (res.code === '200') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$refs.ruleForm.clearValidate()
            }
            this.getAll(this.formInline)
            this.dialogVisible = false
          })
        } else {
          console.log('error submit!!')
          this.$message.error('请输入完整信息')
          return false
        }
      })
    },
    // 初始化查询所有数据
    async getAll(formInline) {
      const res = await applicationGetAll(formInline)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    // 编辑
    async edit(id) {
      this.disabled = true
      const res = await queryUserDealerInfo({ id })
      this.ruleForm = res.data
      this.dialogVisible = true
      console.log(this.ruleForm)
    }
  }
}
</script>
<style lang='scss' scoped>
@import url("../../../styles/elDialog.scss");
.custom_page {
  padding: 20px;
}
.box {
  .dioBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .inner {
      width: 50%;
      padding: 20px;
    }
  }
  .botTitle {
    color: red;
    text-align: center;
  }
}
</style>

